<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* * { */
            /* 清除外间距 */
            /* margin: 0; */
            /* 清除内间距 */
            /* padding: 0; */
            /* 设置怪异盒模型 */
            /* box-sizing: border-box; */
        /* } */

        div p {
            color: red;
        }

        .skill1 {
            background-color: green;
        }

        /* body .skill1 span {
            color: red;
        } */

        ul>li>span {
            color: red;
        }

        .father {
            width: 300px;
            height: 300px;
            background-color: green;
        }
        .son {
            width: 150px;
            height: 150px;
            background-color: yellow;
        }
        /* .father:hover {
            width: 600px;
            background-color: red;
        } */

        .father:hover .son {
            background-color: red;
        }
    </style>
</head>
<body>
    <p>外面的p标签</p>

    <div>
        <p>里面的p标签</p>
    </div>

    <ul>
        <li class="skill1"><span>技能1</span>: 111</li>
        <li class="skill2"><span>技能2</span>: 222</li>
    </ul>
    <ol>
        <li class="skill1"><span>技能1</span>: 111</li>
        <li class="skill2"><span>技能2</span>: 222</li>
    </ol>


    <!-- <div>
        <span>1111</span>
        <p><span></span><span></span></p>
    </div> -->

    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

<!-- 
    通配符选择器
        语法
            * {
                ...
            }
        用来匹配页面中的所有元素

    后代选择器
        语法
            选择器1 选择器2 {
                ...
            }
        选中所有的选择器1，在选择器1里面给所有的选择器2添加样式

    子代选择器
        语法
            选择器1>选择器2 {
                ...
            }
        选中所有的选择器1，给选择器1的子代里面的选择器2添加样式

    伪类选择器
        选择器:hover {
            ...
        }
        鼠标悬停时添加的样式
 -->